<template>
  <div>
    <el-dialog title="评价详情" :visible.sync="showDialogAssess" custom-class='dialog_right MkAssessDetail dialogScroll_detail' top="0%" @close='closeDialog' @open='openDialog'>
      <div class="operationBtnInRightDialog">
        <template v-if="type=='assess' ">
          <span class='infoIcon' @click="deleteItem" ><i class="el-icon-delete"></i> 删除</span>
        </template>
        <template v-else-if="type=='recycle' ">
          <span class='infoIcon' @click="recycleItem" ><i class="mk-icon-undo"></i> 还原</span>
        </template>
      </div>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-110)+'px'}]">
      <div class="contentDiv">
        <el-row :gutter="20">
          <el-col :span="5">订单号</el-col>
          <el-col :span="19">{{treatedOrderData.orderNumber}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">商品名称</el-col>
          <el-col :span="19">{{treatedOrderData.goodsName}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">店铺名称</el-col>
          <el-col :span="19">{{treatedOrderData.shopName}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">下单站点</el-col>
          <el-col :span="19">{{treatedOrderData.siteName}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">用户姓名</el-col>
          <el-col :span="19">{{treatedOrderData.buyerName}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">联系电话</el-col>
          <el-col :span="19">{{treatedOrderData.buyerPhone}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">星级</el-col>
          <el-col :span="19">
            <el-rate
              v-model="treatedOrderData.score"
              disabled
              :colors="['#FF1717', '#FF1717', '#FF1717']">
            </el-rate>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">评价时间</el-col>
          <el-col :span="19">{{new Date(treatedOrderData.evaluateTime).pattern("yyyy-MM-dd HH:mm")}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">评价内容</el-col>
          <el-col :span="19">
            {{treatedOrderData.content}}
              <div class="showImageContainer">
            <template v-for="image in treatedOrderData.images">
              <div class="imageArea" @click="viewImage(image.thumbImageURL)">
                <img :src="image.thumbImageURL" alt="">
              </div>
            </template>
          </div>
          </el-col>
        </el-row>
      </div>
      </el-scrollbar>
    </el-dialog>
    <!--预览图片-->
    <el-dialog :visible.sync="imageDialogVisible"  custom-class="show-image-dialog" top="0%">
      <img :src="imageViewUrl" alt=""/>
    </el-dialog>
  </div>
</template>

<script>
  import assessService from './../../services/assess'
  import {mapState} from 'vuex'
  export default {
    name: 'MkAssessDetail',
    components: {
    },
    props: ['showDialog','id','type'],
    filters:{
    },
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight
    }),
    methods: {
      viewImage(src) {
          this.imageViewUrl = src;
          this.imageDialogVisible = true;
      },
      closeDialog() {
        this.$emit('closeDialog',this.isRefresh);
      },
      openDialog() {
          this.isRefresh = false;
        assessService.loadAssessDetail(this.id, (data) => {
          this.treatedOrderData = data.data;
        })
      },
      deleteItem(){
//        this.fullscreenLoading = true;
//        this.$confirm('您确定要删除吗?', '删除', {
//          confirmButtonText: '确定',
//          cancelButtonText: '取消',
//          customClass: 'confirmBox_warning'
//        }).then(() => {
          assessService.loadAssessDelete(this.id, () => {
            this.fullscreenLoading = false;
            this.$message.success('删除成功');
            this.isRefresh = true;
            this.showDialogAssess = false;
          }, () => {

          });
//        }).catch(() => {
//        });

      },
      recycleItem(){
        this.fullscreenLoading = true;
        assessService.loadAssessRecycle(this.id, () => {
          this.fullscreenLoading = false;
          this.$message.success('还原成功');
          this.isRefresh = true;
          this.showDialogAssess = false;
//          this.$emit('submitSuccess');
//          this.$emit('closeDialog');
        }, () => {
          this.fullscreenLoading = false;
        });
      },
    },
    data () {
      return {
        imageViewUrl:'',
        imageDialogVisible: false,
        dialogVisible: false,
        showDialogAssess: this.showDialog,
        isRefresh: false,
        treatedOrderData:{},
        fullscreenLoading:false
      }
    },
    watch: {
      showDialog: function(value) {
        this.showDialogAssess=value;
      },
    }
  }
</script>
<style lang='less'>
  @import '../../assets/style/main.less';
  .MkAssessDetail{
    font-size:14px;
    .contentDiv{
      background: #f9fafa;
      padding:20px 0;
    }
    .el-row{
      .el-col-5{
        text-align: right;
        line-height: 35px;
        color:@fontColorThree;

      }
      .el-col-19{
        padding-right:30px!important;
        line-height: 35px;
        color:@fontColorTwo;
        word-break: break-all;
        .showImageContainer{
          margin-top: 20px;
          overflow: hidden;
          .imageArea{
            .showImageInFixedContainer(100px,100px);
            margin:0 10px 10px 0;
            float: left;
            cursor: pointer;
          }
        }
      }
    }



  }
</style>
